<template>
   <div>
      <div class="flyray-top flyray-top-left">
         <!-- 筛选条件 -->
         <div class="task_search">
            <el-input v-model="searchForm.taskId" style="width:150px"></el-input>
            <el-button
               type="primary"
               icon="el-icon-search"
               size="small"
               style="margin-bottom:2%"
               @click="search"
            >搜索</el-button>
            <el-button
               icon="el-icon-delete"
               size="small"
               style="margin-left:10px"
               @click="clearform"
            >清空</el-button>
            <el-button
               type="primary"
               icon="el-icon-plus"
               size="small"
               style="margin-bottom:2%"
               @click="addTaskClick"
            >新增</el-button>
         </div>
      </div>
      <div class="mainMsgPadding_Pro box main">
         <!-- 任务列表 -->
         <el-table
            v-loading="tableLoading"
            :border="true"
            :data="tableData"
            :header-cell-style="{background:'rgb(250, 250, 250)',color: 'rgba(0,0,0,.85)'}"
            stripe
            style="width: 100%;margin-bottom:20px;"
         >
            <el-table-column
               fixed
               type="index"
               label="序号"
               width="50"
               show-overflow-tooltip
               align="center"
               background="#000"
            >
               <template slot-scope="scope">
                  <span>{{(page.currentPage - 1) * page.pageSize + scope.$index + 1}}</span>
               </template>
            </el-table-column>
            <el-table-column
               prop="name"
               label="任务名称"
               show-overflow-tooltip
               align="center"
               width="100"
            ></el-table-column>
            <el-table-column label="进度" show-overflow-tooltip align="center" width="120">
               <template slot-scope="scope">
                  <el-progress :percentage="scope.row.schedule?scope.row.schedule:0"></el-progress>
               </template>
            </el-table-column>
            <el-table-column
               prop="beginTime"
               label="任务开始时间"
               show-overflow-tooltip
               align="center"
               width="150"
            ></el-table-column>
            <el-table-column
               prop="endTime"
               label="任务结束时间"
               show-overflow-tooltip
               align="center"
               width="150"
            ></el-table-column>
            <el-table-column label="任务状态" show-overflow-tooltip align="center" width="120">
               <template slot-scope="scope">
                  <span>{{scope.row.status|status}}</span>
               </template>
            </el-table-column>
            <el-table-column
               prop="drivingToken"
               label="任务激励值"
               show-overflow-tooltip
               align="center"
               width="120"
            ></el-table-column>
            <el-table-column
               prop="cash"
               label="任务现金"
               show-overflow-tooltip
               align="center"
               width="120"
            ></el-table-column>
            <el-table-column
               prop="assignTo"
               label="指派给谁"
               show-overflow-tooltip
               align="center"
               width="120"
            ></el-table-column>
            <el-table-column
               prop="workTime"
               label="预估工作单位(h)"
               show-overflow-tooltip
               align="center"
               width="140"
            ></el-table-column>
            <el-table-column
               fixed="right"
               label="操作"
               width="250"
               :border="true"
               show-overflow-tooltip
               align="center"
            >
               <template slot-scope="scope">
                  <el-button
                     icon="el-icon-view"
                     size="small"
                     type="text"
                     @click="detailsClick(scope.row)"
                  >详情</el-button>
                  <el-button
                     icon="el-icon-edit"
                     size="small"
                     type="text"
                     @click="editClick(scope.row)"
                  >编辑</el-button>
                  <el-button
                     type="text"
                     icon="el-icon-delete"
                     size="small"
                     @click="delClick(scope.row)"
                  >删除</el-button>
               </template>
            </el-table-column>
         </el-table>
         <!-- 分页底部 -->
         <el-pagination
            background
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
            :current-page="page.currentPage"
            :page-size="page.pagesize"
            layout="total,jumper,prev, pager, next,sizes"
            :total="page.total"
         ></el-pagination>
      </div>
      <!-- 0 新增/1 详情 / 2编辑 -->
      <a-modal
         v-model="dialogVisible"
         :title="dialogName==0?'新增':dialogName==1?'详情':'编辑'"
         :width="screen ==3 ?'50%':'70%'"
         destroy-on-close
      >
         <el-form ref="form" :model="form" :rules="rules">
            <el-row :gutter="10">
               <el-col :xs="24" :sm="12">
                  <el-form-item label="项目" :label-width="formLabelWidth" prop="projectId">
                     <el-select
                        v-model="form.projectId"
                        placeholder="请选择项目"
                        :disabled="dialogName==1"
                        style="width:100%"
                        @change="projectChange($event)"
                     >
                        <el-option
                           v-for="item in projectIdList"
                           :key="item.value"
                           :label="item.label"
                           :value="item.value"
                        ></el-option>
                     </el-select>
                  </el-form-item>
               </el-col>
               <el-col :xs="24" :sm="12">
                  <el-form-item label="指派对象" :label-width="formLabelWidth" prop="assignTo">
                     <el-select
                        v-model="form.assignTo"
                        placeholder="请选择指派对象"
                        :disabled="dialogName==1"
                        style="width:100%"
                     >
                        <el-option
                           v-for="item in assignToList"
                           :key="item.value"
                           :label="item.label"
                           :value="item.value"
                        ></el-option>
                     </el-select>
                  </el-form-item>
               </el-col>
               <el-col :xs="24" :sm="12">
                  <el-form-item label="任务名称" :label-width="formLabelWidth" prop="name">
                     <el-input v-model="form.name" :disabled="dialogName==1"></el-input>
                  </el-form-item>
               </el-col>
               <el-col :xs="24" :sm="12">
                  <el-form-item label="进度" :label-width="formLabelWidth" prop="schedule">
                     <el-input-number
                        v-model="form.schedule"
                        :step="5"
                        :max="100"
                        :min="0"
                        :disabled="dialogName==1"
                        style="width:100%"
                     ></el-input-number>
                  </el-form-item>
               </el-col>
               <el-col :xs="24" :sm="12">
                  <el-form-item label="任务激励值" :label-width="formLabelWidth" prop="drivingToken">
                     <el-input v-model.number="form.drivingToken" :disabled="dialogName==1"></el-input>
                  </el-form-item>
               </el-col>
               <el-col :xs="24" :sm="12">
                  <el-form-item label="任务奖金" :label-width="formLabelWidth" prop="cash">
                     <el-input v-model.number="form.cash" :disabled="dialogName==1">
                        <el-button slot="append">元</el-button>
                     </el-input>
                  </el-form-item>
               </el-col>
               <el-col :xs="24" :sm="12" v-if="dialogName==1">
                  <el-form-item label="任务状态" :label-width="formLabelWidth" prop="status">
                     <el-select
                        v-model="form.status"
                        placeholder="请选择任务状态"
                        style="width:100%"
                        :disabled="dialogName==1"
                     >
                        <el-option
                           v-for="item in taskStatus"
                           :key="item.value"
                           :label="item.label"
                           :value="item.value"
                        ></el-option>
                     </el-select>
                  </el-form-item>
               </el-col>
               <el-col :xs="24" :sm="12" v-if="dialogName==1">
                  <el-form-item label="审核状态" :label-width="formLabelWidth" prop="auditStatus">
                     <el-select
                        v-model="form.auditStatus"
                        placeholder="请选择审核状态"
                        style="width:100%"
                        :disabled="dialogName==1"
                     >
                        <el-option
                           v-for="item in taskAuditStatus"
                           :key="item.value"
                           :label="item.label"
                           :value="item.value"
                        ></el-option>
                     </el-select>
                  </el-form-item>
               </el-col>
               <el-col :xs="24" :sm="12">
                  <el-form-item label="预估工作时长" :label-width="formLabelWidth" prop="workTime">
                     <el-input v-model.number="form.workTime" :disabled="dialogName==1">
                        <el-button slot="append">时</el-button>
                     </el-input>
                  </el-form-item>
               </el-col>
               <el-col :xs="24" :sm="24">
                  <el-form-item label="任务开始时间" :label-width="formLabelWidth" prop="beginTime">
                     <el-date-picker
                        v-model="form.beginTime"
                        type="datetime"
                        placeholder="选择任务开始时间"
                        align="right"
                        style="width:100%"
                        :disabled="dialogName==1"
                        value-format="yyyy-MM-dd hh:mm:ss"
                     ></el-date-picker>
                  </el-form-item>
               </el-col>
               <el-col :xs="24" :sm="24">
                  <el-form-item label="任务结束时间" :label-width="formLabelWidth" prop="endTime">
                     <el-date-picker
                        v-model="form.endTime"
                        type="datetime"
                        placeholder="选择任务结束时间"
                        align="right"
                        style="width:100%"
                        :disabled="dialogName==1"
                        value-format="yyyy-MM-dd hh:mm:ss"
                     ></el-date-picker>
                  </el-form-item>
               </el-col>
            </el-row>
         </el-form>
         <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="handleSave('form')" v-if="dialogName==0">保 存</el-button>
            <el-button type="primary" @click="handleupDate('form')" v-if="dialogName==2">修 改</el-button>
            <el-button @click="dialogVisible = false">取 消</el-button>
         </div>
      </a-modal>
   </div>
</template>

<script>
import top from "@/components/top/";
import { mapGetters } from "vuex";
import {
   fetchList,
   addObj,
   delObj,
   putObj,
   fetchListProject,
   getMember
} from "@/api/task/";

export default {
   name: "project",
   computed: {
      ...mapGetters(["screen"])
   },
   components: {
      top
   },
   data() {
      return {
         tableLoading: false,
         dialogVisible: false,
         dialogName: 0,
         formLabelWidth: "120px",
         page: {
            total: 0, // 总页数
            currentPage: 1, // 当前页数
            pageSize: 10 // 每页显示多少条
         },
         form: {},
         searchForm: {},
         tableData: [],
         taskStatus: [
            {
               value: 1,
               label: "待分配"
            },
            {
               value: 2,
               label: "待开始"
            },
            {
               value: 3,
               label: "进行中"
            },
            {
               value: 5,
               label: "已取消"
            },
            {
               value: 6,
               label: "已完成"
            }
         ],
         taskAuditStatus: [
            {
               value: 1,
               label: "待审核"
            },
            {
               value: 2,
               label: "已完成"
            }
         ],
         projectIdList: [],
         assignToList: [],
         rules: {
            projectId: [
               { required: true, message: "请选择一个项目", trigger: "change" }
            ],
            assignTo: [
               { required: true, message: "请选择指派对象", trigger: "change" }
            ],
            name: [
               { required: true, message: "请输入任务名称", trigger: "blur" }
            ],
            drivingToken: [
               { required: true, message: "请输入任务激励值", trigger: "blur" }
            ],
            schedule: [
               { required: true, message: "请输入进度", trigger: "blur" }
            ],
            workTime: [
               {
                  required: true,
                  message: "请输入预估工作时间",
                  trigger: "blur"
               }
            ],
            beginTime: [
               {
                  required: true,
                  message: "请选择任务开始时间",
                  trigger: "change"
               }
            ],
            endTime: [
               {
                  required: true,
                  message: "请选择任务截止时间",
                  trigger: "change"
               }
            ],
            cash: [
               { required: true, message: "请输入任务奖金", trigger: "blur" }
            ],
            status: [
               { required: true, message: "请输选择任务状态", trigger: "blur" }
            ]
         },
         stateOption: []
      };
   },
   created() {
      this.getList(this.page);
      this.getProjectList();
   },
   methods: {
      getProjectList() {
         fetchListProject({orgId : this.$store.getters.userInfo.ecoUserNo}).then(res => {
            this.projectIdList = res.data.data.records.map(item => {
               return {
                  value: item.projectId,
                  label: item.name
               };
            });
         });
      },
      getList(page, params) {
         this.tableLoading = true;
         fetchList(
            Object.assign(
               {
                  current: page.currentPage,
                  size: page.pageSize
               },
               params,
               this.searchForm
            )
         )
            .then(response => {
               this.tableData = response.data.data.records;
               this.page.total = response.data.data.total;
               this.tableLoading = false;
            })
            .catch(() => {
               this.tableLoading = false;
            });
      },
      handleCurrentChange(currentPage) {
         this.page.currentPage = currentPage;
         this.getList(this.page);
      },
      handleSizeChange(sizePage) {
         this.page.pageSize = sizePage;
         this.getList(this.page);
      },
      // 项目查成员
      projectChange(val) {
         getMember({ projectId: val }).then(res => {
            delete this.form.assignTo;
            this.assignToList = res.data.data.records.map(item => {
               return {
                  value: item.memberId,
                  label: item.realName
               };
            });
         });
      },
      search() {},
      // 新增
      addTaskClick() {
         this.form = {};
         this.dialogVisible = true;
         this.dialogName = 0;
      },
      // 详情
      detailsClick(row) {
         this.form = {};
         this.dialogVisible = true;
         this.dialogName = 1;
         this.form = row;
      },
      // 编辑
      editClick(row) {
         this.form = {};
         this.dialogVisible = true;
         this.dialogName = 2;
         this.form = row;
      },
      // 删除
      delClick(row) {
         this.$confirm(
            "此操作将组织机构名为“ " + row.name + " ”数据删除, 是否继续?",
            "提示",
            {
               confirmButtonText: "确定",
               cancelButtonText: "取消",
               type: "warning"
            }
         )
            .then(() => {
               delObj(row.taskId).then(res => {
                  this.getList(this.page);
                  this.$message({
                     type: "success",
                     message: "删除成功!"
                  });
               });
            })
            .catch(() => {
               this.$message({
                  type: "info",
                  message: "已取消删除"
               });
            });
      },
      // 清空
      clearform() {},
      // 新增保存
      handleSave(form) {
         this.form.orgId = this.$store.getters.userInfo.ecoUserNo;
         this.$refs[form].validate(valid => {
            if (valid) {
               addObj(this.form)
                  .then(res => {
                     this.page.currentPage = 1;
                     this.getList(this.page);
                     this.dialogVisible = false;
                  })
                  .catch(() => {
                     this.$message({
                        type: "info",
                        message: "新增失败"
                     });
                  });
            } else {
               return false;
            }
         });
      },
      // 修改提交
      handleupDate(form) {
         this.form.orgId = this.$store.getters.userInfo.ecoUserNo;
         this.$refs[form].validate(valid => {
            if (valid) {
               putObj(this.form)
                  .then(res => {
                     this.getList(this.page);
                     this.dialogVisible = false;
                  })
                  .catch(() => {
                     this.$message({
                        type: "info",
                        message: "修改失败"
                     });
                  });
            } else {
               return false;
            }
         });
      }
   },
   filters: {
      status: data => {
         switch (data) {
            case 1:
               return "待分配";
            case 2:
               return "待开始";
            case 3:
               return "进行中";
            case 5:
               return "已取消";
            case 6:
               return "已完成";
            default:
         }
      }
   }
};
</script>
<style scoped>
</style>
